vue.js 构建项目_如何使用Vue.js构建实时设计反馈应用

阅读量：2536 次

发布时间：2019-05-11

本文共 25660 字，大约阅读时间需要 85 分钟。

vue.js 构建项目

by Neo Ighodaro

由新Ighodaro

如何使用Vue.js构建实时设计反馈应用 (How to build a realtime design feedback app using Vue.js)

A basic understanding of Laravel and Vue.js is needed to follow this tutorial.

要学习本教程，需要对Laravel和Vue.js有基本的了解。

Companies like have built applications that designers use to get feedback from other people. A designer can simply load the application, upload their designs, and send the link to the people that will leave feedback. Then those people can leave their feedback on different parts of the design. This is good for the designer, because they can see this feedback and act on it right away.

像这样的公司已经建立了应用程序，设计人员可以使用这些应用程序来获取其他人的反馈。设计人员可以简单地加载应用程序，上传他们的设计并将链接发送给将留下反馈的人员。然后，这些人可以将他们的反馈留在设计的不同部分。这对设计人员来说是一件好事，因为他们可以看到此反馈并立即采取行动。

In this article, we are going to create a similar design feedback application. This will allow you to upload images, send the link to someone else, and get their feedback on your design in realtime.

在本文中，我们将创建一个类似的设计反馈应用程序。这将允许您上传图像，将链接发送给其他人，并实时获得他们对您设计的反馈。

Here is a screen recording of what our application will be able to do:

这是我们的应用程序将执行的操作的屏幕录像：

我们将需要构建我们的应用程序的要求 (Requirements we will need to build our application)

Before we get started, we need to have a few things in place first. The requirements are as follows:

在开始之前，我们需要首先做好一些准备。要求如下：

Knowledge of PHP & the framework.
了解PHP和框架。

Knowledge of JavaScript (ES6).
JavaScript知识(ES6)。

Knowledge of Vue.js.
了解Vue.js。

PHP 7.0+ installed locally on your machine.
PHP 7.0+在您的计算机上本地安装。

installed locally.
在本地安装。

installed locally.
在本地安装。

and Node.js installed locally.
和Node.js本地安装。

A Pusher application. Create one on .
Pusher应用程序。在上创建一个。

Once you have verified that you have the above requirements, we can start creating our application.

确认您具有上述要求后，我们就可以开始创建应用程序了。

设置我们的原型反馈应用程序 (Setting up our prototype feedback application)

Let’s get started with setting up our application. Create a new Laravel application using the command below:

让我们开始设置我们的应用程序。使用以下命令创建一个新的Laravel应用程序：

$ laravel new your_application_name

When the installation is complete, cd to the application directory. Open the .env file so we can make a couple of changes in the file.

安装完成后， cd到应用程序目录。打开.env文件，以便我们可以在文件中进行一些更改。

设置我们的数据库和迁移 (Setting up our database and migrations)

The first thing to do is set up our database and create its migrations. Let’s start by setting up the database. Replace the configuration items below:

首先要做的是建立数据库并创建其迁移。让我们从设置数据库开始。替换以下配置项：

DB_CONNECTION=mysqlDB_HOST=127.0.0.1DB_PORT=3306DB_DATABASE=homesteadDB_USERNAME=homesteadDB_PASSWORD=secret

with:

与：

DB_CONNECTION=sqlite

This will now make the application use SQLite as the database choice. In your terminal, run the command below to create a new SQLite database:

现在，这将使应用程序使用SQLite作为数据库选择。在您的终端中，运行以下命令以创建新SQLite数据库：

$ touch database/database.sqlite

Now we’ll create some migrations which will create the required tables to the database. In your terminal, run the following command to create the migrations we will need:

现在，我们将创建一些迁移，这些迁移将创建数据库所需的表。在您的终端中，运行以下命令来创建我们将需要的迁移：

$ php artisan make:model Photo --migration --controller$ php artisan make:model PhotoComment --migration

The above command will create a model, and then the --migration and --controller flags will instruct it to create a migration and a controller alongside the model.

上面的命令将创建一个模型，然后--migration和--controller标志将指示它创建迁移，并在模型旁边创建一个控制器。

For now, we are interested in the Model and the migration. Open the two migration files created in the ./database/migrations directory. First edit the CreatePhotosTable class. Replace the content of the up method with the following:

目前，我们对模型和迁移感兴趣。打开在./database/migrations目录中创建的两个迁移文件。首先编辑CreatePhotosTable类。用以下内容替换up方法的内容：

public function up(){    Schema::create('photos', function (Blueprint $table) {        $table->increments('id');        $table->string('url')->unique();        $table->string('image')->unique();        $table->timestamps();    });}

This will create the photos table when the migrations are run using the artisan command. It will also create new columns inside the table as specified above.

使用artisan命令运行迁移时，这将创建photos表。还将如上所述在表内创建新列。

Open the second migration class, CreatePhotoCommentsTable, and replace the up method with the contents below:

打开第二个迁移类CreatePhotoCommentsTable ，然后用以下内容替换up方法：

public function up(){    Schema::create('photo_comments', function (Blueprint $table) {        $table->increments('id');        $table->unsignedInteger('photo_id');        $table->text('comment');        $table->integer('top')->default(0);        $table->integer('left')->default(0);        $table->timestamps();

$table->foreign('photo_id')->references('id')->on('photos');    });}

This will create the table photo_comments when the migration is run, and will also create a foreign key to the photos table.

运行迁移时，这将创建表photo_comments ，还将创建photos表的外键。

Now go to your terminal and run the command below to run the migrations:

现在转到终端并运行以下命令来运行迁移：

$ php artisan migrate

This should now create the database tables.

现在，这应该创建数据库表。

设置模型 (Setting up the models)

Now that we have run our migrations, we need to make some changes to our model file so that it can work better with the table.

现在，我们已经运行了迁移，我们需要对模型文件进行一些更改，以使其可以更好地与表一起使用。

Open the Photo model and replace the contents with the following:

打开“ Photo模型并将内容替换为以下内容：

namespace App;

use Illuminate\Database\Eloquent\Model;

class Photo extends Model{    protected $with = ['comments'];

protected $fillable = ['url', 'image'];

public function comments()    {        return $this->hasMany(PhotoComment::class);    }}

In the above, we have added the fillable property. This stops us from having mass assignment exceptions when trying to update those columns using Photo::create. We also set the with property, which just eager loads the comments relationship.

在上面，我们添加了fillable属性。当使用Photo::create尝试更新这些列时，这使我们避免了批量分配异常。我们还设置了with属性，它只是渴望加载comments关系。

We have defined an Eloquent relationship, comments , that just says the Photo has many PhotoComments.

我们已经定义了一种雄辩的关系，即comments ，它表示Photo具有许多PhotoComments 。

Open the PhotoComment model and replace the contents with the following:

打开PhotoComment模型，并将内容替换为以下内容：

namespace App;

use Illuminate\Database\Eloquent\Model;

class PhotoComment extends Model{    protected $fillable = ['photo_id', 'comment', 'top', 'left'];

protected $appends = ['position'];

public function getPositionAttribute()    {        return [            'top' => $this->attributes['top'],             'left' => $this->attributes['left']        ];    }}

Just like the Photo model, we have defined the fillable property. We also use to configure a new property called position . This is then appended, because we specified that in the appends property.

就像Photo模型一样，我们定义了fillable属性。我们还使用来配置一个名为position的新属性。然后将其附加，因为我们在appends属性中指定了该属性。

为我们的应用程序设置前端 (Setting up the frontend for our application)

The next thing we want to do is set up the frontend of our application. Let us start by installing a few NPM packages that we will need in the application. In your Terminal app, run the command below to install the needed packages:

我们要做的下一件事是设置应用程序的前端。让我们从安装应用程序中需要的一些NPM软件包开始。在终端应用程序中，运行以下命令以安装所需的软件包：

$ npm install --save laravel-echo pusher-js vue2-dropzone@^2.0.0$ npm install

This will install , the , and . We will need these packages to handle realtime events later.

这将安装，和。我们将需要这些软件包来稍后处理实时事件。

When the packages have been installed successfully, we can now start adding some HTML and JavaScript.

成功安装软件包后，我们现在可以开始添加一些HTML和JavaScript。

Open the ./routes/web.php file, and let’s add some routes. Replace the contents of the file with the contents below:

打开./routes/web.php文件，然后添加一些路由。用以下内容替换文件的内容：

Route::post('/feedback/{image_url}/comment', 'PhotoController@comment');Route::get('/feedback/{image_url}', 'PhotoController@show');Route::post('/upload', 'PhotoController@upload');Route::view('/', 'welcome');

In the code above, we have defined a few routes. The first one will be handling POSTed feedback. The second route will display the image that is to receive feedback. The third route will handle uploads, and the final route will display the homepage.

在上面的代码中，我们定义了一些路由。第一个将处理POST ed反馈。第二条路线将显示要接收反馈的图像。第三条路线将处理上传，最后一条路线将显示主页。

Now open the ./resources/views/welcome.blade.php file, and in there replace the contents with the following HTML code:

现在打开./resources/views/welcome.blade.php文件，并在其中用以下HTML代码替换内容：

    
        
        
        
        Upload to get Feedback

This is a simple HTML document. If you look closely, you will see a reference to an uploadarea tag which does not exist in HTML but is a Vue component.

这是一个简单HTML文档。如果仔细观察，您会看到一个对uploadarea标记的引用，该标记在HTML中不存在，而是Vue组件。

Open the ./resources/assets/sass/app.scss file and paste the following code below the import statements:

打开./resources/assets/sass/app.scss文件，并将以下代码粘贴到import语句下面：

html, body {    background-color: #fff;    color: #636b6f;    font-family: 'Roboto', sans-serif;    font-weight: 100;    height: 100vh;    margin: 0;}.full-height {    height: 100vh;}.flex-center {    align-items: center;    display: flex;    justify-content: center;}.position-ref {    position: relative;}.content {    text-align: center;}.m-b-md {    margin-bottom: 30px;}.dropzone.dz-clickable {    width: 100vw;    height: 100vh;    .dz-message {        span {            font-size: 19px;            font-weight: 600;        }    }}#canvas {    width: 90%;    margin: 0 auto;    img {        width: 100%;    }}.modal {    text-align: center;    padding: 0!important;    z-index: 9999;}.modal-backdrop.in {    opacity: 0.8;    filter: alpha(opacity=80);}.modal:before {    content: '';    display: inline-block;    height: 100%;    vertical-align: middle;    margin-right: -4px;}.modal-dialog {    display: inline-block;    text-align: left;    vertical-align: middle;}.image-hotspot {    position: relative;    > img {        display: block;        height: auto;        transition: all .5s;    }}.hotspot-point {    z-index: 2;    position: absolute;    display: block;    span {        position: relative;        display: flex;        justify-content: center;        align-items: center;        width: 1.8em;        height: 1.8em;        background: #cf00f1;        border-radius: 50%;        animation: pulse 3s ease infinite;        transition: background .3s;        box-shadow: 0 2px 10px rgba(#000, .2);        &:after {            content: attr(data-price);            position: absolute;            bottom: 130%;            left: 50%;            color: white;            text-shadow: 0 1px black;            font-weight: 600;            font-size: 1.2em;            opacity: 0;            transform: translate(-50%, 10%) scale(.5);            transition: all .25s;        }    }    svg {        opacity: 0;        color: #cf00f1;        font-size: 1.4em;        transition: opacity .2s;    }    &:before,    &:after  {        content: '';        position: absolute;        top: 0;        left: 0;        width: 100%;        height: 100%;        border-radius: 50%;        pointer-events: none;    }    &:before {        z-index: -1;        border: .15em solid rgba(#fff, .9);        opacity: 0;        transform: scale(2);        transition: transform .25s, opacity .2s;    }    &:after {        z-index: -2;        background:#fff;        animation: wave 3s linear infinite;    }    &:hover{        span {            animation: none;            background: #fff;            &:after {                opacity: 1;                transform: translate(-50%, 0) scale(1);            }        }        svg {            opacity: 1;        }        &:before {            opacity: 1;            transform: scale(1.5);            animation: borderColor 2s linear infinite;        }        &:after {            animation: none;            opacity: 0;        }    }}@-webkit-keyframes pulse{    0%, 100% { transform: scale(1); }    50% { transform: scale(1.1); }}@keyframes pulse{    0%, 100% { transform: scale(1); }    50% { transform: scale(1.1); }}.popover {    min-width: 250px;}

Save the file and exit. Now let’s move on to creating our Vue components.

保存文件并退出。现在让我们继续创建Vue组件。

使用Vue创建我们的原型反馈应用程序的功能 (Using Vue to create the functionalities of our prototype feedback app)

Open the ./resources/assets/js/app.js file, and in there create the Vue component. In this file, find the line below:

打开./resources/assets/js/app.js文件，然后在其中创建Vue组件。在此文件中，找到以下行：

Vue.component('example', require('./components/Example.vue'));

and replace it with:

并替换为：

Vue.component('uploadarea', require('./components/UploadArea.vue'));Vue.component('feedback',require('./components/FeedbackCanvas.vue'));

Now let’s create our first Vue component. In the ./resources/assets/js/components directory, create a file called UploadArea.vue. In the new file, paste in the following:

现在，让我们创建第一个Vue组件。在./resources/assets/js/components目录中，创建一个名为UploadArea.vue的文件。在新文件中，粘贴以下内容：

In the template section, we are simply using the Vue dropzone package to define an area through which files can be uploaded. You can view the documentation .

在template部分，我们仅使用Vue dropzone包定义一个可以上传文件的区域。您可以在查看文档。

In the script section, we get the Laravel CSRF token from the header of the page and import the Dropzone component into our current Vue component.

在script部分，我们从页面的标题中获取Laravel CSRF令牌，并将Dropzone组件导入到我们当前的Vue组件中。

In the methods property, we define a showImagePage method that just redirects the user to the image page after the image has been successfully uploaded. In the mounted method, we limit the dropzone file to allowing one file upload at a time.

在methods属性中，我们定义了showImagePage方法，该方法仅在成功上传图像后将用户重定向到图像页面。在mounted方法中，我们将dropzone文件限制为一次只能上传一个文件。

Let’s now create our next Vue component. In the ./resources/assets/js/components directory, create a new file called FeedbackCanvas.vue and paste in the following:

现在让我们创建下一个Vue组件。在./resources/assets/js/components目录中，创建一个名为FeedbackCanvas.vue的新文件，并粘贴以下内容：

We have defined the template for our Vue component. This is the area where the image will be displayed and where feedback will be given.

我们已经为Vue组件定义了template 。这是显示图像并提供反馈的区域。

Now we’ll break some parts of it down a little.

现在，我们将其中的一些部分分解。

The a tag has a bunch of attributes set to it.

在a标签有一堆设置为它的属性。

The v-for loops through each comment/feedback the image has.

v-for循环遍历图像的每个注释/反馈。

The v-bind:style applies a style attribute to the a tag using the left and top properties of the comment/feedback.

v-bind:style使用注释/反馈的left和top属性将style属性应用于a标签。

We also have the :data-content, data-toggle and data-placement which Bootstrap needs for its .

Bootstrap的还需要:data-content ， data-toggle和data-placement 。

The img tag has the @click event that fires the function addCommentPoint when an area of the image is clicked.

img标签具有@click事件，当单击图像的某个区域时，该事件会触发功能addCommentPoint 。

And finally, there’s a Vue component add-comment-modal that accepts a property image. This component will display a form so anyone can leave a comment.

最后，还有一个Vue组件add-comment-modal ，它接受属性image 。该组件将显示一个表单，因此任何人都可以发表评论。

In this same file, after the closing template tag, paste in the following code:

在该文件的结束template标记之后，粘贴以下代码：

? The created and mounted methods are hooks that are called automatically during the creation of the Vue component. You can l

？ 与c reated和米ounted方法是被创建的Vue组件期间自动调用挂钩。 您可以

In the mounted method, we use Laravel Echo to listen to a Pusher channel. The channel name depends on the ID of the image currently being viewed. Each image will have broadcasts on a different channel based on the ID of the image.

在mounted方法中，我们使用Laravel Echo收听Pusher频道。频道名称取决于当前正在观看的图像的ID。每个图像将基于图像的ID在不同的频道上进行广播。

When the added event is triggered on the feedback-$id channel, it looks through the available image.comments and, if the comment broadcasted does not exist, it adds it to the comments array.

当在feedback-$id通道上触发added事件时，它将通过可用的image.comments查找，如果广播的注释不存在，则将其添加到注释数组。

In the create method, we activate Bootstrap popovers, define a function that calculates the coordinates of the click point, and we define a function that removes comments that have not been saved from the image.comments array.

在create方法中，我们激活Bootstrap弹出窗口，定义一个函数来计算单击点的坐标，并定义一个函数来删除尚未从image.comments数组中保存的image.comments 。

Under methods , we define the addCommentPoint method which calculates the click coordinates and then launches a new Bootstrap modal. This will be created in the add-comment-modal Vue component.

在methods ，我们定义addCommentPoint方法，该方法计算点击坐标，然后启动新的Bootstrap模态。这将在add-comment-modal Vue组件中创建。

For Laravel Echo to work, we need to open the ./resources/assets/js/bootstrap.js file and add the code below at the bottom of the file:

为了使Laravel Echo正常工作，我们需要打开./resources/assets/js/bootstrap.js文件，并在文件底部添加以下代码：

import Echo from 'laravel-echo'

window.Pusher = require('pusher-js');

window.Echo = new Echo({    broadcaster: 'pusher',    key: 'PUSHER_KEY',    encrypted: true,    cluster: 'PUSHER_CLUSTER'});

You should replace PUSHER_KEY and PUSHER_CLUSTER with the key and cluster for your Pusher application.

您应该用Pusher应用程序的密钥和群集替换PUSHER_KEY和PUSHER_CLUSTER 。

Now lets create our next Vue component, AddCommentModal.vue. It is already referenced in our FeedbackCanvas.vue Vue component.

现在，让我们创建下一个Vue组件AddCommentModal.vue 。我们的FeedbackCanvas.vue Vue组件已经引用了它。

// Create url and payload            let url = `/feedback/${this.photo.url}/comment`;            let payload = {comment: this.feedback, left: position.left, top: position.top}            axios.post(url, payload).then(response => {                this.feedback = null                modal.modal('hide')                vm.photo.comments[modal.data('comment-index')] = response.data                $(document).ready(() => $('[data-toggle="popover"]').popover())            })        }    }}

In the template section, we have defined a typical Bootstrap modal. In the modal form, we have attached a call to submitFeedback() which is triggered when the form is submitted.

在template部分，我们定义了典型的Bootstrap模式。在模式表单中，我们已附加了对submitFeedback()的调用，该调用在表单提交时触发。

In the script section, we have defined the submitFeedback() method in the methods property of the Vue component. This function simply sends a comment to the backend for storage. If there is a favorable response from the API, the Bootstrap modal is hidden and the comment is appended to the image.comments array. The Bootstrap popover is then reloaded so it picks up the changes.

在script部分中，我们在Vue组件的methods属性中定义了submitFeedback()方法。此功能只是将注释发送到后端进行存储。如果API响应良好，则会隐藏Bootstrap模式，并将注释附加到image.comments数组。然后会重新加载Bootstrap弹出窗口，以便拾取更改。

With that final change, we have defined all our Vue components. Open your terminal and run the command below to build your JS and CSS assets:

经过最后的更改，我们定义了所有Vue组件。打开终端并运行以下命令来构建JS和CSS资产：

$ npm run dev

Great! Now let’s build the backend.

大！现在让我们构建后端。

为我们的原型反馈应用程序创建端点 (Creating the Endpoints for our prototype feedback application)

In your terminal, enter the command below:

在您的终端中，输入以下命令：

php artisan make:event FeedbackAdded

This will create an event class called FeedbackAdded. We will use this file to trigger events to Pusher when we add some feedback.This will make feedback appear in realtime to anyone looking at the image.

这将创建一个名为FeedbackAdded的事件类。添加一些反馈后，我们将使用此文件触发事件给Pusher，这将使反馈实时显示给任何查看图像的人。

Open the PhotoController class and replace the contents with the code below:

打开PhotoController类，然后将内容替换为以下代码：

use App\Events\FeedbackAdded;use App\{Photo, PhotoComment};

class PhotoController extends Controller{    public function show($url)    {        $photo = Photo::whereUrl($url)->firstOrFail();

return view('image', compact('photo'));    }

public function comment(string $url)    {        $photo = Photo::whereUrl($url)->firstOrFail();

$data = request()->validate([            "comment" => "required|between:2,2000",            "left" => "required|numeric|between:0,100",            "top"  => "required|numeric|between:0,100",        ]);

$comment = $photo->comments()->save(new PhotoComment($data));

event(new FeedbackAdded($photo->id, $comment->toArray()));

return response()->json($comment);    }

public function upload()    {        request()->validate(['file' => 'required|image']);

$gibberish = md5(str_random().time());

$imgName = "{$gibberish}.".request('file')->getClientOriginalExtension();

request('file')->move(public_path('storage'), $imgName);

$photo = Photo::create(['image' => $imgName, 'url' => $gibberish]);

return response()->json($photo->toArray());    }}

In the above, we have a show method which shows an image so people can leave feedback on it. Next, there is the comment method that saves a new comment on an image. The final method is the upload method that simply uploads an image to the server and saves it to the database.

在上面，我们有一个show方法来显示图像，以便人们可以在其上留下反馈。接下来，有一个comment方法，可以在图像上保存新的注释。最后一种方法是上upload方法，该方法只是将图像upload服务器并将其保存到数据库。

Let’s create the view for the show method. Create a new file in the ./resources/views directory called image.blade.php. In this file, paste the code below:

让我们为show方法创建视图。在./resources/views目录中创建一个名为image.blade.php的新文件。在此文件中，粘贴以下代码：

    
        
        
        
    ;    Laravel

In the above, the only thing that stands out is the feedback tag. It is basically in reference to the feedback Vue component we built earlier in the article. Every other thing is just basic Blade and HTML.

在上面，唯一引人注目的是feedback标签。它基本上是参考我们在本文前面构建的反馈Vue组件。其他所有东西只是基本的Blade和HTML。

Now that we have created the view, we need to add the directory for uploads defined in the upload method. In your terminal, run the command below:

现在，我们已经创建了视图，我们需要添加上upload方法中定义的upload目录。在您的终端中，运行以下命令：

$ php artisan storage:link

This command will create a symlink from the ./storage directory to the ./public/storage directory. If you look in the ./public directory you should see the symlink.

此命令将创建从./storage目录到./public/storage目录的符号链接。如果查看./public目录，则应该看到符号链接。

Now that we have created the backend to support our web application, we need to add Pusher to the backend so that the comments made are broadcasted and can be picked up by other people browsing the image.

现在，我们已经创建了支持Web应用程序的后端，我们需要将Pusher添加到后端，以便广播所发表的评论，并且其他浏览该图像的人也可以将其提取。

使用Pusher将实时功能添加到原型反馈应用程序中 (Adding realtime functionality to the prototype feedback app using Pusher)

Open your terminal and enter the command below to install the :

打开终端，然后在下面输入命令以安装：

$ composer require pusher/pusher-php-server "~3.0"

Open the .env file and scroll to the bottom and configure the Pusher keys as seen below:

打开.env文件并滚动到底部，然后按如下所示配置Pusher键：

PUSHER_APP_ID="PUSHER_ID"PUSHER_APP_KEY="PUSHER_KEY"PUSHER_APP_SECRET="PUSHER_SECRET"

Also in the same file, look for the BROADCAST_DRIVER and change it from log to pusher.

同样在同一文件中，查找BROADCAST_DRIVER并将其从log更改为pusher 。

Next, open the ./config/broadcasting.php and scroll to the pusher key. Replace the options key of that configuration with the code below:

接下来，打开./config/broadcasting.php并滚动到pusher键。用以下代码替换该配置的options键：

// ...

'options' => [        'cluster' => 'PUSHER_CLUSTER',        'encrypted' => true    ],

// ...

? Remember to replace the PUSHER_ID, PUSHER_KEY, PUSHER_SECRET and PUSHER_CLUSTER with the values from your Pusher application.

？ 切记用您的Pusher应用程序中的值替换P USHER_ID, P USHER_KEY, P USHER_SECRET和P USHER_CLUSTER 。

Now, open the FeedbackAdded class and replace the contents with the code below:

现在，打开FeedbackAdded类，并将内容替换为以下代码：

use Illuminate\Broadcasting\Channel;use Illuminate\Queue\SerializesModels;use Illuminate\Foundation\Events\Dispatchable;use Illuminate\Broadcasting\InteractsWithSockets;use Illuminate\Contracts\Broadcasting\ShouldBroadcast;

class FeedbackAdded implements ShouldBroadcast{    use Dispatchable, InteractsWithSockets, SerializesModels;

public $comment;

public $photo_id;

public function __construct(int $photo_id, array $comment)    {        $this->comment = $comment;        $this->photo_id = $photo_id;    }

public function broadcastOn()    {        return new Channel("feedback-{$this->photo_id}");    }

public function broadcastAs()    {        return 'added';    }}

In the class above, we define the comment object and the photo_id which will be used to compose the channel name in the broadcastOn method. We also define the broadcastAs method, which will allow us to customize the name of the event being sent to Pusher.

在上面的类中，我们定义了comment对象和photo_id ，它们将用于在broadcastOn方法中组成频道名称。我们还定义了broadcastAs方法，这将使我们能够自定义发送给Pusher的事件的名称。

That’s all. Now, let’s run our application. In your terminal, run the code below:

就这样。现在，让我们运行我们的应用程序。在您的终端中，运行以下代码：

$ php artisan serve

This should start a new PHP server. You can then use it to test your application. Go to the URL given and you should see your application.

这应该启动一个新PHP服务器。然后，您可以使用它来测试您的应用程序。转到给出的URL，您应该会看到您的应用程序。

结论 (Conclusion)

In this article, we have successfully created a prototype application’s feedback feature that will allow designers to share their designs with others and receive feedback on them.

在本文中，我们成功创建了原型应用程序的反馈功能，该功能将使设计人员可以与他人共享他们的设计并接收有关他们的反馈。

This post was first published to .

该帖子最初发布给。